//饼图
/*接入分布饼图1*/
var  color = ["#00a9e1","#0046af","#360293","#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e"];
var pieData=[
        {value: 133, name: "注册管理机构"},
        {value: 160, name: "注册服务机构"},
        {value: 190, name: "权威解析机构"},
        {value: 233, name: "递归解析机构"}
]
var pie3Opt = {
    color:color,
    backgroundColor: 'transparent',
    legend: {
        show:true,
        orient: 'vertical',
        right: 10,
        top: 'center',
        data:['注册管理机构','注册服务机构','权威解析机构','递归解析机构'],
        textStyle:{
            color:'#fff'
        }
    },
    tooltip: {
        show: false
    },
    series: [{
        name: '占比',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['45%', '50%'],
        hoverAnimation: true,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: false,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        data: pieData
    },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['45%', '50%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
};
var pie3Chart = echarts.init(document.getElementById('ec_pie'))


function sum(){
	var totle=0;
	for(var i=0;i<pieData.length;i++){
		totle+=pieData[i].value
	}
	return totle
}
var pieIndex = 0
var pieAutoShow = function(){
    if (pieIndex > pieData.length-1){
        pieIndex = 0
    }
    for (var i = 0;i < pieData.length;i++){
        if (i != pieIndex){
            pie3Opt.series[0].data[i]['selected'] = false;
        }else{
            pie3Opt.series[0].data[i]['selected'] = true;
        }
    }
    console.log(pie3Opt.series[0].data)
    //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
    pie3Opt.series[1].data[0].label.normal.formatter=parseInt(pie3Opt.series[0].data[pieIndex].value/sum()*100) + "%"
    pie3Opt.series[1].data[1].label.normal.formatter = "\n" + pie3Opt.series[0].data[pieIndex].name
    pie3Chart.setOption(pie3Opt)
    pieIndex++
    setTimeout(pieAutoShow,1200)
}
pieAutoShow()


//柱状图

//柱状图
optionBar = {
		color:['#89acf8','#fce24f'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
    	left: 50,
			top: 60,
			right: 50,
			bottom: 60,
    },
    legend: {
    	show:false,
//      data:['蒸发量','降水量','平均温度']
    },
    
    xAxis: [
        {
            type: 'category',
            data: ['广东','北京','江苏','上海','浙江','福建','湖北','湖南','河南','安徽','四川','广西'],
            splitLine:{    //grid区域分隔线
                show:false
            },
            axisLabel: {  //坐标轴标签
                show: true,
                textStyle: {
                    color: '#fff'
                },
                interval:0,
                rotate:30,
                margin:10
            },
            axisTick: {
                show: false   //刻度线
            },
            axisLine:{
                show: false   //坐标轴轴线
            },
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {	
            type: 'value',
//          name: '水量',
            label: {
            	normal: {
            		color: '#fff'
            	}
            },
//          min: 0,
//          max: 250,
//          interval: 50,
            splitLine:{    //grid区域分隔线
                show:false
            },
            axisLabel: {  //坐标轴标签
                show: true,
//              formatter: '{value} ml',
                textStyle: {
                    color: '#fff'
                },
//              margin:10
            },
            axisTick: {
                show: false   //刻度线
            },
            axisLine:{
                show: false   //坐标轴轴线
            }
        },
        {
            type: 'value',
//          name: '温度',
//          min: 0,
//          max: 25,
//          interval: 5,
            splitLine:{    //grid区域分隔线
                show:false
            },
            axisLabel: {  //坐标轴标签
                show: true,
//              formatter: '{value} °C',
                textStyle: {
                    color: '#fff'
                },
                margin:10
            },
            axisTick: {
                show: false   //刻度线
            },
            axisLine:{
                show: false   //坐标轴轴线
            }
        }
    ],
    series: [
        {
            name:'蒸发量',
            type:'bar',
            data:[20, 49, 70, 232, 256, 767, 1356, 1622, 326, 200, 64, 33]
        },
        {
            name:'平均温度',
            type:'line',
            yAxisIndex: 1,
            data:[20, 22, 33, 45, 63, 102, 203, 234, 230, 165, 120, 62]
        }
    ]
};

var pie4Chart = echarts.init(document.getElementById('ec_bar'))
pie4Chart.setOption(optionBar)

//地图
var geoCoordMap = {
	    '上海': [121.4648,31.2891],
	    '东莞': [113.8953,22.901],
	    '东营': [118.7073,37.5513],
	    '中山': [113.4229,22.478],
	    '临汾': [111.4783,36.1615],
	    '临沂': [118.3118,35.2936],
	    '丹东': [124.541,40.4242],
	    '丽水': [119.5642,28.1854],
	    '乌鲁木齐': [87.9236,43.5883],
	    '佛山': [112.8955,23.1097],
	    '保定': [115.0488,39.0948],
	    '兰州': [103.5901,36.3043],
	    '包头': [110.3467,41.4899],
	    '北京': [116.4551,40.2539],
	    '北海': [109.314,21.6211],
	    '南京': [118.8062,31.9208],
	    '南宁': [108.479,23.1152],
	    '南昌': [116.0046,28.6633],
	    '南通': [121.1023,32.1625],
	    '厦门': [118.1689,24.6478],
	    '台州': [121.1353,28.6688],
	    '合肥': [117.29,32.0581],
	    '呼和浩特': [111.4124,40.4901],
	    '咸阳': [108.4131,34.8706],
	    '哈尔滨': [127.9688,45.368],
	    '唐山': [118.4766,39.6826],
	    '嘉兴': [120.9155,30.6354],
	    '大同': [113.7854,39.8035],
	    '大连': [122.2229,39.4409],
	    '天津': [117.4219,39.4189],
	    '太原': [112.3352,37.9413],
	    '威海': [121.9482,37.1393],
	    '宁波': [121.5967,29.6466],
	    '宝鸡': [107.1826,34.3433],
	    '宿迁': [118.5535,33.7775],
	    '常州': [119.4543,31.5582],
	    '广州': [113.5107,23.2196],
	    '廊坊': [116.521,39.0509],
	    '延安': [109.1052,36.4252],
	    '张家口': [115.1477,40.8527],
	    '徐州': [117.5208,34.3268],
	    '德州': [116.6858,37.2107],
	    '惠州': [114.6204,23.1647],
	    '成都': [103.9526,30.7617],
	    '扬州': [119.4653,32.8162],
	    '承德': [117.5757,41.4075],
	    '拉萨': [91.1865,30.1465],
	    '无锡': [120.3442,31.5527],
	    '日照': [119.2786,35.5023],
	    '昆明': [102.9199,25.4663],
	    '杭州': [119.5313,29.8773],
	    '枣庄': [117.323,34.8926],
	    '柳州': [109.3799,24.9774],
	    '株洲': [113.5327,27.0319],
	    '武汉': [114.3896,30.6628],
	    '汕头': [117.1692,23.3405],
	    '江门': [112.6318,22.1484],
	    '沈阳': [123.1238,42.1216],
	    '沧州': [116.8286,38.2104],
	    '河源': [114.917,23.9722],
	    '泉州': [118.3228,25.1147],
	    '泰安': [117.0264,36.0516],
	    '泰州': [120.0586,32.5525],
	    '济南': [117.1582,36.8701],
	    '济宁': [116.8286,35.3375],
	    '海口': [110.3893,19.8516],
	    '淄博': [118.0371,36.6064],
	    '淮安': [118.927,33.4039],
	    '深圳': [114.5435,22.5439],
	    '清远': [112.9175,24.3292],
	    '温州': [120.498,27.8119],
	    '渭南': [109.7864,35.0299],
	    '湖州': [119.8608,30.7782],
	    '湘潭': [112.5439,27.7075],
	    '滨州': [117.8174,37.4963],
	    '潍坊': [119.0918,36.524],
	    '烟台': [120.7397,37.5128],
	    '玉溪': [101.9312,23.8898],
	    '珠海': [113.7305,22.1155],
	    '盐城': [120.2234,33.5577],
	    '盘锦': [121.9482,41.0449],
	    '石家庄': [114.4995,38.1006],
	    '福州': [119.4543,25.9222],
	    '秦皇岛': [119.2126,40.0232],
	    '绍兴': [120.564,29.7565],
	    '聊城': [115.9167,36.4032],
	    '肇庆': [112.1265,23.5822],
	    '舟山': [122.2559,30.2234],
	    '苏州': [120.6519,31.3989],
	    '莱芜': [117.6526,36.2714],
	    '菏泽': [115.6201,35.2057],
	    '营口': [122.4316,40.4297],
	    '葫芦岛': [120.1575,40.578],
	    '衡水': [115.8838,37.7161],
	    '衢州': [118.6853,28.8666],
	    '西宁': [101.4038,36.8207],
	    '西安': [109.1162,34.2004],
	    '贵阳': [106.6992,26.7682],
	    '连云港': [119.1248,34.552],
	    '邢台': [114.8071,37.2821],
	    '邯郸': [114.4775,36.535],
	    '郑州': [113.4668,34.6234],
	    '鄂尔多斯': [108.9734,39.2487],
	    '重庆': [107.7539,30.1904],
	    '金华': [120.0037,29.1028],
	    '铜川': [109.0393,35.1947],
	    '银川': [106.3586,38.1775],
	    '镇江': [119.4763,31.9702],
	    '长春': [125.8154,44.2584],
	    '长沙': [113.0823,28.2568],
	    '长治': [112.8625,36.4746],
	    '阳泉': [113.4778,38.0951],
	    '青岛': [120.4651,36.3373],
	    '韶关': [113.7964,24.7028]
	};
	
	var BJData = [
	    [{name:'北京'}, {name:'上海',value:95}],
	    [{name:'北京'}, {name:'广州',value:90}],
	    [{name:'北京'}, {name:'大连',value:80}],
	    [{name:'北京'}, {name:'南宁',value:70}],
	    [{name:'北京'}, {name:'南昌',value:60}],
	    [{name:'北京'}, {name:'拉萨',value:50}],
	    [{name:'北京'}, {name:'长春',value:40}],
	    [{name:'北京'}, {name:'包头',value:30}],
	    [{name:'北京'}, {name:'重庆',value:20}],
	    [{name:'北京'}, {name:'常州',value:10}]
	];
	
	var convertData = function (data) {
	    var res = [];
	    for (var i = 0; i < data.length; i++) {
	        var dataItem = data[i];
	        var fromCoord = geoCoordMap[dataItem[0].name];
	        var toCoord = geoCoordMap[dataItem[1].name];
	        if (fromCoord && toCoord) {
	            res.push({
	                fromName: dataItem[0].name,
	                toName: dataItem[1].name,
	                coords: [fromCoord, toCoord]
	            });
	        }
	    }
	    return res;
	};
	
	//var color = ['#a6c84c', '#ffa022', '#46bee9'];
	var series=  [
		{	
			tooltip : {
		        trigger: 'item',
		        backgroundColor: 'rgba(5,8,52,0)'
		   },
	        type: 'effectScatter',
	        coordinateSystem: 'geo',
	        zlevel: 2,
	        rippleEffect: {
	            brushType: 'stroke'
	        },
	        label: {
	            normal: {
	                show: true,
	                position: 'right',
	                formatter: '{b}'
	            }
	        },
	        symbolSize: function (val) {
	            return val[2] / 8;
	        },
	        itemStyle: {
	            normal: {
	                color: '#a6c84c'
	            }
	        },
	        data: BJData.map(function (dataItem) {
	            return {
	                name: dataItem[1].name,
	                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
	            };
	        })
	   },
	   {
	        type: 'lines',
	        zlevel: 2,
	        symbol: ['none', 'arrow'],
	        symbolSize: 10,
	        effect: {
	            show: true,
	            period: 6,
	            trailLength: 0,
	//          symbol: planePath,
	            symbolSize: 3
	        },
	        lineStyle: {
	            normal: {
	                color: '#a6c84c',
	                width: 1,
	                opacity: 0.6,
	                curveness: 0.2
	            }
	        },
	        data: convertData(BJData)
	    },
	   
	];
	
	
var optionMap= {
    	tooltip : {
	        trigger: 'item'
	    },
	    legend: {
	    	show:false,
	        orient: 'vertical',
	        top: 'bottom',
	        left: 'right',
	//      data:['北京 Top10', '上海 Top10', '广州 Top10'],
	        textStyle: {
	            color: '#fff'
	        },
	        selectedMode: 'single'
	    },
	    geo: {
	  		zoom:1.1,
	        map: 'china',
	        label: {
	            emphasis: {
	                show: false
	            }
	        },
	        roam: true,
	        label:{
	            	normal:{
		                show:false	,
		        		textStyle:{
		        			color: '#fff'
		        		}	
		        	},
		        	emphasis:{
		                show:true,
		        		textStyle:{
		        			color: '#fff'
		        		}	
		        	}
	            },
	            itemStyle:{
	                normal:{
	            		borderColor:'#16cffa',
	            		borderWidth:1,
	                	areaColor:'rgba(0,206,253,0.2)'
	                	
	                },
	                emphasis:{
	                	areaColor:'#238e97'
	                	
	                }
	            },
	    },
//	    series: series	
	};

var pie2Chart = echarts.init(document.getElementById('ec_map'))
pie2Chart.setOption(optionMap)

window.addEventListener('resize',function(){
	pie2Chart.resize();
	pie3Chart.resize();
	pie4Chart.resize()
})